// 样式-数据-表格类型选择
import React from 'react';
import { InputNumber, Radio, Switch } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import DragContainer from './Drag/DragContainer';
import { COMPLEX_CODE, ORDINARY_CODE, WD_CODE } from './EnumConfig';
import { filterObjectNullKeys } from 'src/libs/utils';
interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	dragOver: ( value: string ) => void;
	currentDragNode: any;
}

const ChooseTableType = ( props: IProps ) => {
	const { form, config, onValuesChange, dragOver, currentDragNode } = props;
	const tableType = config.data.tableType; //form.getFieldsValue();

	const isComplex = tableType === COMPLEX_CODE;

	const initType = isComplex ? WD_CODE : 'both';
	const columnName = isComplex ? 'comColumns' : 'columns';
	const columnTip = isComplex ? '拖入维度' : '拖入字段';
	
	const onBlur = () => {
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'data' );
	};

	return (
		<>
			<FormItem label="类型" name="tableType">
				<Radio.Group>
					<Radio value={ORDINARY_CODE}>普通表格</Radio>
					<Radio value={COMPLEX_CODE}>交叉透视表</Radio>
				</Radio.Group>
			</FormItem>
			<FormItem label="列" name={columnName}>
				<DragContainer
					form={form}
					name={columnName}
					tip={columnTip}
					type={initType}
					config={config}
					dragOver={dragOver}
					currentDragNode={currentDragNode}
					onValuesChange={onValuesChange}
				></DragContainer>
			</FormItem>

			{tableType === COMPLEX_CODE && (
				<>
					<FormItem label="行" name="rows">
						<DragContainer
							form={form}
							name="rows"
							tip="拖入维度"
							config={config}
							dragOver={dragOver}
							currentDragNode={currentDragNode}
							onValuesChange={onValuesChange}
						></DragContainer>
					</FormItem>
					<FormItem label="指标" name="target">
						<DragContainer
							form={form}
							name="target"
							tip="拖入度量"
							type="measure"
							config={config}
							dragOver={dragOver}
							currentDragNode={currentDragNode}
							onValuesChange={onValuesChange}
						></DragContainer>
					</FormItem>
				</>
			)}
			<FormItem label="开启分页" name="isOpenPage" valuePropName="checked">
				<Switch/>
			</FormItem>
			{config.data.isOpenPage && <FormItem label="每页行数" name="pageSize">
				<InputNumber
					style={ { width: '100%' } } min={ 1 } onBlur={ onBlur } onPressEnter={ onBlur }
					onStep={ onBlur }/>
			</FormItem>}
		</>
	);
};

export default React.memo( ChooseTableType );
